import {computed, designPage, reactive, useRefs} from "@peryl/react-compose";
import {$message, Box, Button, Checkbox, DatePicker, Form, FormItem, i18n, iAnotherRule, Icon, Input, InputGroup, InputNumber, PageCard, PageCardContent, PageCardTitle, Radio, RadioGroup, Select, SelectOption, Tooltip, VirtualList} from "plain-design";

export default designPage(() => {

  const { refs, onRef } = useRefs({ form: Form });

  type iItemMeta = ({ id: string, type: 'A' | 'B' | 'C' | 'D' | 'E' } & Record<string, any>)

  /*@formatter:off*/
  const state = reactive({
    useTextInput:false,
    columns:3,
    list: ((): iItemMeta[] => {
      return [
        // {id:"_",type:"top"},
        {"id":"0","type":"A","name":"A_1","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"1","type":"B","name":"B_2","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"2","type":"C","name":"C_3","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"3","type":"D","name":"D_4","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"4","type":"E","name":"E_5","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"5","type":"A","name":"A_6","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"6","type":"B","name":"B_7","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"7","type":"C","name":"C_8","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"8","type":"D","name":"D_9","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"9","type":"E","name":"E_10","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"10","type":"A","name":"A_11","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"11","type":"B","name":"B_12","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"12","type":"C","name":"C_13","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"13","type":"D","name":"D_14","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"14","type":"E","name":"E_15","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"15","type":"A","name":"A_16","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"16","type":"B","name":"B_17","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"17","type":"C","name":"C_18","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"18","type":"D","name":"D_19","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"19","type":"E","name":"E_20","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"20","type":"A","name":"A_21","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"21","type":"B","name":"B_22","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"22","type":"C","name":"C_23","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"23","type":"D","name":"D_24","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"24","type":"E","name":"E_25","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"25","type":"A","name":"A_26","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"26","type":"B","name":"B_27","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"27","type":"C","name":"C_28","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"28","type":"D","name":"D_29","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"29","type":"E","name":"E_30","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"30","type":"A","name":"A_31","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"31","type":"B","name":"B_32","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"32","type":"C","name":"C_33","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"33","type":"D","name":"D_34","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"34","type":"E","name":"E_35","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"35","type":"A","name":"A_36","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"36","type":"B","name":"B_37","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"37","type":"C","name":"C_38","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"38","type":"D","name":"D_39","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"39","type":"E","name":"E_40","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"40","type":"A","name":"A_41","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"41","type":"B","name":"B_42","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"42","type":"C","name":"C_43","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"43","type":"D","name":"D_44","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"44","type":"E","name":"E_45","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"45","type":"A","name":"A_46","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"46","type":"B","name":"B_47","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"47","type":"C","name":"C_48","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"48","type":"D","name":"D_49","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"49","type":"E","name":"E_50","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"50","type":"A","name":"A_51","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"51","type":"B","name":"B_52","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"52","type":"C","name":"C_53","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"53","type":"D","name":"D_54","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"54","type":"E","name":"E_55","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"55","type":"A","name":"A_56","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"56","type":"B","name":"B_57","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"57","type":"C","name":"C_58","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"58","type":"D","name":"D_59","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"59","type":"E","name":"E_60","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"60","type":"A","name":"A_61","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"61","type":"B","name":"B_62","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"62","type":"C","name":"C_63","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"63","type":"D","name":"D_64","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"64","type":"E","name":"E_65","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"65","type":"A","name":"A_66","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"66","type":"B","name":"B_67","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"67","type":"C","name":"C_68","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"68","type":"D","name":"D_69","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"69","type":"E","name":"E_70","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"70","type":"A","name":"A_71","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"71","type":"B","name":"B_72","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"72","type":"C","name":"C_73","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"73","type":"D","name":"D_74","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"74","type":"E","name":"E_75","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"75","type":"A","name":"A_76","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"76","type":"B","name":"B_77","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"77","type":"C","name":"C_78","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"78","type":"D","name":"D_79","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"79","type":"E","name":"E_80","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"80","type":"A","name":"A_81","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"81","type":"B","name":"B_82","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"82","type":"C","name":"C_83","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"83","type":"D","name":"D_84","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"84","type":"E","name":"E_85","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"85","type":"A","name":"A_86","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"86","type":"B","name":"B_87","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"87","type":"C","name":"C_88","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"88","type":"D","name":"D_89","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"89","type":"E","name":"E_90","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"90","type":"A","name":"A_91","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"91","type":"B","name":"B_92","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"92","type":"C","name":"C_93","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"93","type":"D","name":"D_94","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"94","type":"E","name":"E_95","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"95","type":"A","name":"A_96","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"96","type":"B","name":"B_97","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"97","type":"C","name":"C_98","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"98","type":"D","name":"D_99","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"99","type":"E","name":"E_100","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"100","type":"A","name":"A_101","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"101","type":"B","name":"B_102","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"102","type":"C","name":"C_103","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"103","type":"D","name":"D_104","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"104","type":"E","name":"E_105","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"105","type":"A","name":"A_106","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"106","type":"B","name":"B_107","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"107","type":"C","name":"C_108","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"108","type":"D","name":"D_109","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"109","type":"E","name":"E_110","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"110","type":"A","name":"A_111","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"111","type":"B","name":"B_112","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"112","type":"C","name":"C_113","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"113","type":"D","name":"D_114","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"114","type":"E","name":"E_115","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"115","type":"A","name":"A_116","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"116","type":"B","name":"B_117","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"117","type":"C","name":"C_118","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"118","type":"D","name":"D_119","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"119","type":"E","name":"E_120","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"120","type":"A","name":"A_121","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"121","type":"B","name":"B_122","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"122","type":"C","name":"C_123","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"123","type":"D","name":"D_124","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"124","type":"E","name":"E_125","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"125","type":"A","name":"A_126","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"126","type":"B","name":"B_127","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"127","type":"C","name":"C_128","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"128","type":"D","name":"D_129","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"129","type":"E","name":"E_130","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"130","type":"A","name":"A_131","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"131","type":"B","name":"B_132","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"132","type":"C","name":"C_133","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"133","type":"D","name":"D_134","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"134","type":"E","name":"E_135","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"135","type":"A","name":"A_136","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"136","type":"B","name":"B_137","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"137","type":"C","name":"C_138","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"138","type":"D","name":"D_139","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"139","type":"E","name":"E_140","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"140","type":"A","name":"A_141","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"141","type":"B","name":"B_142","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"142","type":"C","name":"C_143","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"143","type":"D","name":"D_144","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"144","type":"E","name":"E_145","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"145","type":"A","name":"A_146","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"146","type":"B","name":"B_147","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"147","type":"C","name":"C_148","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"148","type":"D","name":"D_149","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"149","type":"E","name":"E_150","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"150","type":"A","name":"A_151","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"151","type":"B","name":"B_152","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"152","type":"C","name":"C_153","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"153","type":"D","name":"D_154","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"154","type":"E","name":"E_155","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"155","type":"A","name":"A_156","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"156","type":"B","name":"B_157","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"157","type":"C","name":"C_158","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"158","type":"D","name":"D_159","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"159","type":"E","name":"E_160","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"160","type":"A","name":"A_161","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"161","type":"B","name":"B_162","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"162","type":"C","name":"C_163","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"163","type":"D","name":"D_164","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"164","type":"E","name":"E_165","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"165","type":"A","name":"A_166","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"166","type":"B","name":"B_167","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"167","type":"C","name":"C_168","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"168","type":"D","name":"D_169","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"169","type":"E","name":"E_170","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"170","type":"A","name":"A_171","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"171","type":"B","name":"B_172","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"172","type":"C","name":"C_173","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"173","type":"D","name":"D_174","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"174","type":"E","name":"E_175","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"175","type":"A","name":"A_176","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"176","type":"B","name":"B_177","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"177","type":"C","name":"C_178","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"178","type":"D","name":"D_179","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"179","type":"E","name":"E_180","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"180","type":"A","name":"A_181","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"181","type":"B","name":"B_182","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"182","type":"C","name":"C_183","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"183","type":"D","name":"D_184","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"184","type":"E","name":"E_185","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"185","type":"A","name":"A_186","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"186","type":"B","name":"B_187","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"187","type":"C","name":"C_188","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"188","type":"D","name":"D_189","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"189","type":"E","name":"E_190","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"190","type":"A","name":"A_191","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"191","type":"B","name":"B_192","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"192","type":"C","name":"C_193","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"193","type":"D","name":"D_194","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"194","type":"E","name":"E_195","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"195","type":"A","name":"A_196","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"196","type":"B","name":"B_197","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"197","type":"C","name":"C_198","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"198","type":"D","name":"D_199","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"},{"id":"199","type":"E","name":"E_200","OrderID":"QQ","CustomerID":"WW","CustomerPhone":"EE","CustomerEmail":"RR"}
      ]
    })()
  });
  /*@formatter:on*/

  type iFieldRender = (data: { field: string, formData: any }) => any

  interface iFieldMeta {
    type: 'input' | 'select' | 'date' | 'number' | 'textarea' | 'radio',
    label: string,
    field: string,
    required?: boolean,
    rule?: Omit<iAnotherRule, 'label' | 'field'>,
    render?: iFieldRender,
  }

  const typesFields: Record<iItemMeta['type'], iFieldMeta[]> = {
    A: [
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderID').d('订单编号'), field: 'OrderID' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CustomerID').d('客户编号'), field: 'CustomerID' },
      {
        type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CustomerName').d('客户姓名'), field: 'CustomerName',
        render: ({ field, formData }) => {
          return state.useTextInput ? (
            <span>{formData[field]}</span>
          ) : (
            <InputGroup>
              <Input v-model={formData[field]} v-slots={{
                suffix: () => (
                  <Tooltip message={i18n.$intl('page.virtualFormGroupPage.customerNameTips').d("不为空则客户电话、客户邮箱必填")}>
                    <span><Icon icon="pi-info-circle-fill"/></span>
                  </Tooltip>
                )
              }}/>
              <Button label={i18n.$intl('page.virtualFormGroupPage.customRenderField').d("自定义渲染字段")}/>
            </InputGroup>
          );
        },
      },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CustomerPhone').d('客户电话'), field: 'CustomerPhone' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CustomerEmail').d('客户邮箱'), field: 'CustomerEmail' },
      { type: 'date', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderTime').d('下单时间'), field: 'OrderTime' },
    ],
    B: [
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderStatus').d('订单状态'), field: 'OrderStatus' },
      { type: 'number', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderAmount').d('订单金额'), field: 'OrderAmount' },
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.PaymentMethod').d('支付方式'), field: 'PaymentMethod' },
      { type: 'radio', label: i18n.$intl('page.virtualFormGroupPage.fields.PaymentStatus').d('支付完成'), field: 'PaymentStatus' },
      { type: 'date', label: i18n.$intl('page.virtualFormGroupPage.fields.PaymentTime').d('支付时间'), field: 'PaymentTime' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.ReceiverName').d('收货人姓名'), field: 'ReceiverName' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.ReceiverPhone').d('收货人电话'), field: 'ReceiverPhone' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.ShippingAddress').d('收货地址'), field: 'ShippingAddress' },
    ],
    C: [
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.PostalCode').d('邮编'), field: 'PostalCode' },
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.ShippingMethod').d('配送方式'), field: 'ShippingMethod' },
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.ShippingStatus').d('配送状态'), field: 'ShippingStatus' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CourierID').d('配送员编号'), field: 'CourierID' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CourierName').d('配送员姓名'), field: 'CourierName' },
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.InvoiceType').d('发票类型'), field: 'InvoiceType' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.InvoiceTitle').d('发票抬头'), field: 'InvoiceTitle' },
      { type: 'number', label: i18n.$intl('page.virtualFormGroupPage.fields.InvoiceNumber').d('发票号码'), field: 'InvoiceNumber' },
      { type: 'number', label: i18n.$intl('page.virtualFormGroupPage.fields.TotalItems').d('商品总数'), field: 'TotalItems' },
      { type: 'number', label: i18n.$intl('page.virtualFormGroupPage.fields.DiscountAmount').d('优惠金额'), field: 'DiscountAmount' },
      { type: 'number', label: i18n.$intl('page.virtualFormGroupPage.fields.ShippingFee').d('运费金额'), field: 'ShippingFee' },
      { type: 'textarea', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderNote').d('订单备注'), field: 'OrderNote' },
    ],
    D: [
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.RelatedOrderID').d('关联订单编号'), field: 'RelatedOrderID' },
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderSource').d('订单来源'), field: 'OrderSource' },
    ],
    E: [
      { type: 'select', label: i18n.$intl('page.virtualFormGroupPage.fields.OrderType').d('订单类型'), field: 'OrderType' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.CustomerServiceNote').d('客服备注'), field: 'CustomerServiceNote' },
      { type: 'input', label: i18n.$intl('page.virtualFormGroupPage.fields.ProductList').d('商品列表'), field: 'ProductList' },
    ],
  };

  state.list.forEach(item => {
    const fields = typesFields[item.type];
    fields.forEach((field, index) => {
      item[field.field] = (() => {
        switch (field.type) {
          case 'input':
          case 'textarea':
            return field.label;
          case 'date':
            return DatePicker.plainDate.today().getDayJs().format('YYYY-MM-DD');
          case 'number':
            return index;
          case 'select':
            return 'new';
          case 'radio':
            return 'Y';
        }
      })();
    });
  });

  console.log(state.list.map(item => ({ ...item })));

  Object.values(typesFields).forEach(fields => {fields.forEach(field => field.required = true);});

  /*根据类型动态渲染编辑表单组件*/
  const renderHandler: Record<iFieldMeta['type'], iFieldRender> = {
    input: ({ field, formData }) => {
      return <Input v-model={formData[field]}/>;
    },
    select: ({ field, formData }) => {
      return <Select v-model={formData[field]}>
        <SelectOption label={i18n.$intl('page.virtualFormGroupPage.selectOptions.new').d("新建")} val="new"/>
        <SelectOption label={i18n.$intl('page.virtualFormGroupPage.selectOptions.to_pay').d("待支付")} val="to_pay"/>
        <SelectOption label={i18n.$intl('page.virtualFormGroupPage.selectOptions.to_ship').d("待发货")} val="to_ship"/>
        <SelectOption label={i18n.$intl('page.virtualFormGroupPage.selectOptions.cancel').d("已取消")} val="cancel"/>
      </Select>;
    },
    number: ({ field, formData }) => {
      return <InputNumber v-model={formData[field]}/>;
    },
    date: ({ field, formData }) => {
      return <DatePicker v-model={formData[field]}/>;
    },
    textarea: ({ field, formData }) => {
      return <Input textarea v-model={formData[field]}/>;
    },
    radio: ({ field, formData }) => {
      return (
        <RadioGroup v-model={formData[field]} itemWidth={'50%'}>
          <Radio label="是" val="Y"/>
          <Radio label="否" val="N"/>
        </RadioGroup>
      );
    },
  };

  const verticalLabel = i18n.state.currentLang === 'en-us';

  const formRules = computed((): { allRules: iAnotherRule[], itemRules: iAnotherRule[][] } => {
    const ret: iAnotherRule[][] = [];
    state.list.forEach((item, index) => {
      const typeField = typesFields[item.type];
      const retItem: iAnotherRule[] = [];
      ret.push(retItem);
      typeField.forEach(field => {
        if (field.required) {
          retItem.push({
            label: field.label,
            field: field.field + index,
            required: true,
            valueGetter: () => item[field.field],
            message: `第${index + 1}条记录 ${field.label} 校验不通过，不能为空`,
          });
        }
      });
    });
    return {
      /*allRules传递给Form表单组件，使得在虚拟滚动的情况下，即使这个字段的FormItem没有渲染，这个字段的校验规则也能够加入到总的校验规则中*/
      allRules: ret.flat(1),
      /*itemRules则是传递给FormItem组件，将itemRules[itemIndex]传递给FormItem，使得表单组件在编辑的时候能够实时地检测变化并且触发教研规则*/
      itemRules: ret.map(retItem => {
        return retItem.map(item => {
          return {
            ...item,
            message: undefined,
          };
        });
      })
    };
  });

  const save = async () => {
    await refs.form?.validate();
    $message.success(i18n.$intl('page.virtualFormGroupPage.validateSuccess').d('保存成功!'));
  };

  return () => (
    <PageCard full style={{ backgroundColor: 'transparent' }}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', backgroundColor: 'transparent', padding: '0' }}>
        <Box className="mb">
          <PageCard>
            <PageCardTitle title={i18n.$intl('page.virtualFormGroupPage.pageTitle', { val: state.list.length }).d(`总共${state.list.length}个分组`)}>
              <Checkbox label={i18n.$intl('page.virtualFormGroupPage.pureText').d("纯文本")} v-model={state.useTextInput}/>
              <Button label={i18n.$it('base.edit.save').d("保存")} onClick={save} mode="fill"/>
            </PageCardTitle>
          </PageCard>
        </Box>
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden', }}>
          <div style={{ position: 'absolute', inset: '0' }}>
            <div style={{ display: 'inline-block', width: '100%', height: '100%', padding: '0', }}>
              <Form
                ref={onRef.form}
                full
                inputMode={state.useTextInput ? 'text' : undefined}
                verticalLabel={verticalLabel}
                labelWidth={verticalLabel ? 20 : 150}
                validateMessagePosition="bottom-right"
                anotherRules={formRules.value.allRules}
              >
                <VirtualList
                  data={state.list}
                  size={300}
                  dynamicSize
                  v-slots={{
                    default: ({ item, vid, index: itemIndex }) => {
                      return (
                        <Box data-vid={vid} key={vid} className="pb">
                          {(() => {
                            const typeField = typesFields[item.type as iItemMeta['type']];
                            return (
                              <PageCard>
                                <PageCardTitle title={item.name}/>
                                <PageCardContent>
                                  {typeField.map((field) => (
                                    <div style={{ width: field.type === 'textarea' ? '100%' : `calc(100% / ${state.columns})`, display: 'inline-block' }} key={field.field}>
                                      <FormItem
                                        labelWidth={verticalLabel ? undefined : "200"}
                                        field={field.field + itemIndex}
                                        label={field.label}
                                        rules={formRules.value.itemRules[itemIndex].filter(i => i.field === (field.field + itemIndex))}
                                      >
                                        {field.render ?
                                          field.render({ field: field.field, formData: item })
                                          : renderHandler[field.type]({ field: field.field, formData: item })}
                                      </FormItem>
                                    </div>
                                  ))}
                                </PageCardContent>
                              </PageCard>
                            );
                          })()}
                        </Box>
                      );
                    }
                  }}
                />
              </Form>
            </div>
          </div>
        </div>
      </div>
    </PageCard>
  );

});
